<template>
    <div class="four-code displayFlex flexCenter positionR">
        <span class="placeholder-text" v-if="!(code1 || code2 || code3 || code4)">请输入手机短信验证码</span>
        <span class="code-item-wrap" :class="{'active':code1 }">
            <input id="code1" ref="code1" @blur="code4Blur($event,false)" @keydown="inputKeyDown($event,0)" :class="{'disabled':code1 }" class="code-input-item" type="number" v-model="code1" maxlength="1" />
        </span>
        <span class="code-item-wrap" :class="{'active':code2}">
            <input id="code2" ref="code2" @blur="code4Blur($event,false)" @keydown="inputKeyDown($event,1)" :class="{'disabled':code2}" class="code-input-item" type="number" v-model="code2" maxlength="1" />
        </span>
         <span class="code-item-wrap" :class="{'active':code3}">
             <input id="code3" ref="code3" @blur="code4Blur($event,false)" @keydown="inputKeyDown($event,2)" :class="{'disabled':code3}" class="code-input-item" type="number" v-model="code3" maxlength="1" />
         </span>
         <span class="code-item-wrap" :class="{'active':code4}">
              <input id="code4" ref="code4" @blur="code4Blur($event)" @keydown="inputKeyDown($event,3)" class="code-input-item" type="number" v-model="code4" maxlength="1" />
         </span>
    </div>
</template>

<script>
    export default {
        name: "fourCode",
        data(){
            return{
                code1:'',
                code2:'',
                code3:'',
                code4:'',
                codeObj:{codeTrue:false,code:null},
            }
        },
        methods:{
            inputKeyDown(e,index){
                let that = this;
                let thisDom = e.currentTarget;
                let beforeValue = thisDom.value;
                setTimeout(()=>{
                    if(thisDom.value == ''){
                        switch (index) {
                            case 0:;
                                break;
                            case 1:
                                that.code1 = '';
                                that.$refs.code1.focus();
                                break;
                            case 2:
                                that.code2 = '';
                                that.$refs.code2.focus();
                                break;
                            case 3:
                                if(beforeValue.toString()){
                                    that.code4 = '';
                                    that.$refs.code4.focus();
                                }else{
                                    that.code3 = '';
                                    that.$refs.code3.focus();
                                }
                                break;
                            default:;break;
                        }
                    }
                },10)
            },
            returnCode(){
                let that = this;
                this.codeObj = {
                    code:that.code1+that.code2+that.code3+that.code4
                };
                if( this.code1 && this.code2 && this.code3 && this.code4 ){
                    this.codeObj.codeTrue = true;
                    this.$emit("checkCode",that.codeObj);
                }else{
                    this.codeObj.codeTrue = false;
                    this.$emit("checkCode",that.codeObj);
                }
            },
            code4Blur(e,boolean=true){
                let current = e.currentTarget;
                let value = ''
                setTimeout(()=>{
                    if(!boolean){
                        value = !(current.value.toString())
                    }else{
                        value = current.value.toString()
                    }
                    if(value){
                        this.iosBlur();
                    }
                },10)
            }
        },
        watch:{
            code1(newVal,oldVal){
                if(newVal && newVal.toString().length == 1){
                    this.$refs.code2.focus();
                    if(oldVal){
                        this.code2 = newVal;
                        this.$refs.code2.focus();
                    }
                } else if(newVal && newVal.toString().length > 1){
                    this.code1 = newVal.toString().slice(0,1);
                    this.code2 = newVal.toString().slice(-1);
                    this.$refs.code2.focus();
                }
                this.returnCode();
            },
            code2(newVal,oldVal){
                if(newVal && newVal.toString().length == 1){
                    this.$refs.code3.focus();
                    if(oldVal){
                        this.code3 = newVal;
                        this.$refs.code3.focus();
                    }
                } else if(newVal && newVal.toString().length > 1){
                    this.code2 = newVal.toString().slice(0,1);
                    this.code3 = newVal.toString().slice(-1);
                    this.$refs.code3.focus();
                }
                this.returnCode();
            },
            code3(newVal,oldVal){
                if(newVal && newVal.toString().length == 1){
                    this.$refs.code4.focus();
                    if(oldVal){
                        this.code4 = newVal;
                        this.$refs.code4.focus();
                    }
                } else if(newVal && newVal.toString().length > 1){
                    console.log(newVal)
                    this.code3 = newVal.toString().slice(0,1);
                    this.code4 = newVal.toString().slice(-1);
                    this.$refs.code4.focus();
                }
                this.returnCode();
            },
            code4(newVal){
                if(newVal && newVal.toString().length == 1){
                    this.$refs.code4.blur();
                }else if(newVal && newVal.toString().length > 1){
                    this.code4 = newVal.toString().slice(0,1);
                    this.$refs.code4.blur();
                }
                // else if(!newVal){
                //     this.$refs.code3.focus();
                // }
                this.returnCode();
            },
        }
    }
</script>

<style scoped>
    .four-code{
        -webkit-justify-content: space-between;
        justify-content: space-between;
        padding-top: .36rem;
    }
    .code-input-item{
        background-color: transparent;
        position: relative;
        z-index: 1;
    }
    .placeholder-text{
        position: absolute;
        color: #CCCCCC;
        font-size: .15rem;
        bottom: .15rem;
    }
    .code-item-wrap{
        border-bottom: 1px solid #E0E0E0;
        display: inline-block;
        width: .5rem;
        height: .3rem;
        text-align: center;
    }
    .code-input-item{
        width: 100%;
        height: 100%;
        text-align: center;
    }
</style>